import {useEffect, useState} from 'react';
import {Col, Form, Input, Modal, Row, Radio, message} from "antd";
import {createHost, modifyHost} from "@/services/host";
import {checkData} from '@/tools/tool'

const CreateModify = (props: any) => {
  const {data, mode, onClose, onOk, visible} = props
  const [form] = Form.useForm()
  const reg = /^([0-9]\d*)$/
  const passwordReg = "^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$\\%\\^\\&\\*\\(\\)])[0-9a-zA-Z!@#$\\%\\^\\&\\*\\(\\)]"
  const {TextArea} = Input;
  useEffect(() => {
    if (visible && !!data && mode === 'create') {
      form.resetFields()
    } else {
      form.setFieldsValue({
        business_intimal: data.business_intimal,
        business_outer: data.business_outer,
        business_template_epon: data.business_template_epon,
        business_template_gpon: data.business_template_gpon,
        line_template_epon: data.line_template_epon,
        line_template_gpon: data.line_template_gpon,
        gemport: data.gemport,
        olt_name: data.olt_name,
        olt_system_name: data.olt_system_name,
        up_port: data.up_port,
      })
    }
  }, [visible, data, mode])
  const handleOk = () => {
    form.validateFields().then(value => {
      if (mode === 'create') {
        createHost({...value}).then()
        onOk()
        message.success('后台处理中,请稍后').then()
      } else {
        console.log(value)
        modifyHost({...value, oltId: data.olt_id}).then(res => {
          if (res.status === 200) {
            onOk()
            message.success(res.message).then()
          } else {
            message.error(res.message).then()
          }
        })
      }

    })
  }
  return (
    <Modal
      title={mode === 'create' ? '新装主机' : '修改主机'}
      destroyOnClose
      maskClosable={false}
      keyboard={false}
      mask={false}
      visible={visible}
      onCancel={onClose}
      width={'50vw'}
      onOk={handleOk}
    >
      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 14}} autoComplete="off">
        <Row>
          <Col span={12}>
            <Form.Item label="主机名称" name="olt_name" rules={[{required: true, message: '主机名称必填'}]}>
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="系统名称" name="olt_system_name" rules={[{required: true, message: '系统名称必填'}]}>
              <Input/>
            </Form.Item>
          </Col>
          {mode === "create" ? <>
            <Col span={12}>
              <Form.Item label="主机型号" name={'olt_mode'} rules={[{required: true, message: '请选择主机型号'}]}>
                <Radio.Group>
                  <Radio value={'华为'}>华为</Radio>
                  <Radio value={'中兴'}>中兴</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="主机地址" name={"olt_ip"} rules={[{required: true, message: '主机地址必填'}]}>
                <Input/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="主机端口" name={"olt_port"} initialValue={23}
                         rules={[{required: true, message: '主机端口必填'}, {pattern: reg, message: '输入格式错误,仅限数字'}]}>
                <Input defaultValue={23} value={23}/>
              </Form.Item>
            </Col>
            <Col span={12}>
              {/*, {
                         pattern: passwordReg,
                         message: '输入格式错误,包含字母、数字、特舒符号'
                       }*/}
              <Form.Item label="登录账号" name={"olt_account"}
                         rules={[{required: true, message: '登录账号必填'}]}>
                <Input/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="登录密码" name={"olt_passwd"}
                         rules={[{required: true, message: '登录密码必填'}, {validator: checkData}]}>
                <Input/>
              </Form.Item>
            </Col>
          </> : null}
          <Col span={12}>
            <Form.Item label="上联端口" name={"up_port"} rules={[{required: true, message: '上联端口必填'}]}>
              <TextArea autoSize={{maxRows: 3}} maxLength={300} showCount/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label='线路模板(GPON)'
              name='line_template_gpon'
              rules={[{required: true, message: '输入GPON线路模板'}, {pattern: reg, message: '输入格式错误,仅限数字'}]}
            >
              <Input allowClear value={mode === 'modify' ? data.line_template_GPON : ''}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label='业务模板(GPON)'
              name='business_template_gpon'
              rules={[{required: true, message: '输入GPON业务模板'}, {pattern: reg, message: '输入格式错误,仅限数字'}]}
            >
              <Input allowClear value={mode === 'modify' ? data.business_template_GPON : ''}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label='线路模板(EPON)'
              name='line_template_epon'
              rules={[{required: true, message: '输入EPON线路模板'}, {pattern: reg, message: '输入格式错误,仅限数字'}]}
            >
              <Input allowClear value={mode === 'modify' ? data.line_template_EPON : ''}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label='业务模板(EPON)'
              name='business_template_epon'
              rules={[{required: true, message: '输入EPON业务模板'}, {pattern: reg, message: '输入格式错误,仅限数字'}]}
            >
              <Input allowClear value={mode === 'modify' ? data.business_template_EPON : ''}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label='业务外层'
              name='business_outer'
              rules={[{required: true, message: '输入业务外层'}, {pattern: reg, message: '输入格式错误,仅限数字'}]}
            >
              <Input allowClear value={mode === 'modify' ? data.business_outer : ''}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label='业务内层'
              name='business_intimal'
              rules={[{required: true, message: '输入业务内层'}, {pattern: reg, message: '输入格式错误,仅限数字'}]}
            >
              <Input allowClear value={mode === 'modify' ? data.business_intimal : ''}/>
            </Form.Item>
          </Col>
          {mode === "create" ? <><Col span={12}>
            <Form.Item
              label='保存方式'
              name='save_mode'
              rules={[{required: true, message: '选择保存方式'}]}
              initialValue={mode === 'modify' ? data.save_mode : ''}
            >
              <Radio.Group>
                <Radio value={'autosave'}>自动保存</Radio>
                <Radio value={'activesave'}>主动保存</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
            <Col span={12}>
              <Form.Item
                label='保存数据间隔'
                name='save_hours'
                rules={[{required: true, message: '输入保存数据时间间隔'}, {pattern: reg, message: '输入格式错误,仅限数字'}]}
              >
                <Input placeholder={'12'} value={mode === 'modify' ? data.save_hours : ''}/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name={'gemport'}
                label={'gemport'}
                rules={[{
                  required: true,
                  message: 'gemport',
                }]}
              >
                <Input value={mode === 'modify' ? data.gemport : ''} placeholder='gemport'/>
              </Form.Item>
            </Col></> : null}
        </Row>
      </Form>

    </Modal>
  );
};

export default CreateModify;
